<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Goggle!</title>
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="main.css" />
<script src="lib/jquery.js"></script>
<script src="lib/jquery.easing.1.3.js"></script>
<script src="lib/jquery-ui.js"></script>

<script type="text/javascript">
	var realtimeword;
	var searchRequest;
	var detailRequest;
	var order = "mentioned";
	var word = "";
	var big = false;
	var words = new Array();
	var rwords = new Array();
	var rsel = 0;
	// xml request를 생성

	function createRXhr() {
		if (window.ActiveXObject) {//IE 예전버전
			realtimeword = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			realtimeword = new XMLHttpRequest();
		}
	}
	function createSXhr() {
		if (window.ActiveXObject) {//IE 예전버전
			searchRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			searchRequest = new XMLHttpRequest();
		}
	}
	function createDXhr() {
		if (window.ActiveXObject) {//IE 예전버전
			detailRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			detailRequest = new XMLHttpRequest();
		}
	}
	function Dlistener(url) {

		createDXhr();
		detailRequest.onreadystatechange = dcallback;
		detailRequest.open("get", url, true);
		detailRequest.send("null");
	}
	function wordmover() {
		if (event.keyCode == 38) {
			if (rsel >= 0)
				document.getElementById("l" + rsel).style.backgroundColor = "#FFF";
			if (rsel > 0) {
				rsel--;
				document.getElementById("form1").word.value = rwords[rsel];
			} else {
				rsel = rwords.length - 1;
				document.getElementById("form1").word.value = rwords[rsel];
			}
			document.getElementById("l" + rsel).style.backgroundColor = "#D6BBEA";
			document.getElementById("wordlistdiv").scrollTop = parseInt(rsel / 10) * 200;
		} else if (event.keyCode == 40) {
			if (rsel >= 0)
				document.getElementById("l" + rsel).style.backgroundColor = "#FFF";

			if (rsel < rwords.length - 1) {
				document.getElementById("form1").word.value = rwords[++rsel];
			} else {
				rsel = 0;
				document.getElementById("form1").word.value = rwords[rsel];
			}
			document.getElementById("l" + rsel).style.backgroundColor = "#D6BBEA";
			document.getElementById("wordlistdiv").scrollTop = parseInt(rsel / 10) * 200;
		} else if (event.keyCode == 13) {
		} // 엔터
	}
	function Rlistener(word) {
		if (event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13) {
			createRXhr();
			realtimeword.onreadystatechange = rcallback;
			var form = document.getElementById("form1")
			realtimeword.open("get", "search.do?mode=autoword&filter="
					+ form.filter.value + "&word=" + word, true);
			realtimeword.send("null");
		}
	}
	function Slistener() {
		var form = document.getElementById("form1");
		createSXhr();
		jQuery("#wordlistdiv").hide("fast");
		
		searchRequest.onreadystatechange = scallback;
		searchRequest.open("get", "search.do?mode=search&filter="
				+ form.filter.value + "&order=" + order + "&word="
				+ form.word.value, true);
		searchRequest.send("null");
		word = form.word.value;
		return false;
	}
	function highlightwords(wl, str) {
		for ( var i = 0; i < wl.length; i++) {
			str = str.replace(new RegExp(" " + wl[i], "g"),
					"&nbsp;<span style='background-color:#D6BBEA'><b>" + wl[i]
							+ "</b></span>");
		}
		return str;
	}
	function scallback() { //검색결과 출력
		jQuery("#detail").hide("fast");
		if (searchRequest.readyState == 4) {//응답을 다 받은 경우
			if (searchRequest.status == 200) {//응답코드가 200인 경우 - 정상
				var res = searchRequest.responseText;//

				var obj = eval("(" + res + ")");
				words = obj.words;
				document.getElementById("content").innerHTML = "<b>Search results : "
						+ obj.count + "</b>  (" + obj.time + ")<hr>";
				if (obj.count > 0) {
					setBig();

					for ( var i = 0; i < obj.result.length; i++) {
						document.getElementById("content").innerHTML += "<p><div class='r_title'>"
								+ "<a href=\"javascript:Dlistener('detail?path="
								+ obj.result[i].url
								+ "')\">"
								+ highlightwords(obj.words, obj.result[i].title)
								+ "</a></div><span class='r_author'>"
								+ highlightwords(obj.words,
										obj.result[i].author)
								+ "</span> <span class='r_biblio'> ["
								+ obj.result[i].biblio
								+ "]</span><div class='r_text'>"
								+ highlightwords(obj.words, obj.result[i].text)
								+ "</div><span class='r_url'>"
								+ obj.result[i].file
								+ "</span><span class='r_mentioned'>"
								+ obj.result[i].mentioned
								+ "[Exactly "
								+ obj.result[i].eowmentioned
								+ "] Times mentioned" + "</span> </p>"
					}
				} else {
					setSmall();
					document.getElementById("content").innerHTML = "<br><br><span style='color:#672c91'><h1><center>Oops! No result found!</center></h1></span>";
				}
			} else {
				document.getElementById("content").innerHTML = "load error..\n"
						+ realtimeword.status
				document.getElementById("content").innerHTML += searchRequest.responseText;
			}
		}
	}
	function detailhide() {
		jQuery("#detail").hide("fast");
	}
	function treehide() {
		jQuery("#treewrapper").hide("fast");
	}
	function dcallback() { //본문  출력
		if (detailRequest.readyState == 4) {//응답을 다 받은 경우
			if (detailRequest.status == 200) {//응답코드가 200인 경우 - 정상
				var res = detailRequest.responseText;//
				document.getElementById("detail").innerHTML = "<div style='position:absolute;width:100%;text-align:right;z-index:4'><a href='javascript:detailhide()'><img src='img/x.png'></a></div>";
				document.getElementById("detail").innerHTML += highlightwords(
						words, res);
				//alert(res);
				document.getElementById("detail").style.top = "50%";
				document.getElementById("detail").style.left = "50%";
				jQuery("#detail")
						.show(
								"slow",
								function() {
									var top_margin;
									if (document.getElementById("detail").scrollHeight < document.documentElement.clientHeight) {
										top_margin = -document
												.getElementById("detail").scrollHeight / 2;

									} else {
										top_margin = -document.documentElement.clientHeight / 2;

									}
									jQuery("#detail").animate({
										margin : top_margin + 'px 0 0 -300px'

									}, 1000, 'easeOutBack');	
								});
			} else {
				document.getElementById("detail").innerHTML = realtimeword.status;
			}
		}
	}
	function rcallback() { //자동완성 출력
		if (realtimeword.readyState == 4) {//응답을 다 받은 경우
			if (realtimeword.status == 200) {//응답코드가 200인 경우 - 정상
				var res = realtimeword.responseText;//
				var obj = eval("(" + res + ")");
				rsel = -1;
				rwords = obj.list;
				if (obj.err != "err") {
					document.getElementById("wordlist").innerHTML = ""
					for ( var i = 0; i < obj.list.length; i++) {
						document.getElementById("wordlist").innerHTML += "<li id='l"+i+"'><a href=\"javascript:makeword('"
								+ obj.list[i]
								+ "')\">"
								+ obj.list[i]
								+ "</a></li>"
					}
					if (obj.list.length == 1
							&& obj.list[0] == document.getElementById("word").value) {
						jQuery("#wordlistdiv").slideUp("fast");
					} else {
						jQuery("#wordlistdiv").hide();
						jQuery("#wordlistdiv").slideDown("fast");
					}
				} else {
					jQuery("#wordlistdiv").slideUp("fast");
				}
			} else {
				jQuery("#wordlistdiv").slideDown("fast");
				document.getElementById("wordlist").innerHTML = realtimeword.status
			}
		}
	}
	function setorder(o) {
		order = o;
		if (big) {
			document.getElementById("form1").word.value = word
			Slistener();
		}
		if (order == 'accuracy') {
			document.getElementById("order").innerHTML = "order : "
					+ "<a href=\"javascript:setorder('accuracy')\"><b>accuracy</b></a>,"
					+ "<a href=\"javascript:setorder('mentioned')\">mentioned</a>"
		} else {
			document.getElementById("order").innerHTML = "order : "
					+ "<a href=\"javascript:setorder('accuracy')\">accuracy</a>,"
					+ "<a href=\"javascript:setorder('mentioned')\"><b>mentioned</b></a>"
		}

	}

	function makeword(word) {
		document.getElementById("word").value = word;
		Slistener();
		//Rlistener(word);

	}
	function setBig() {
		big = true;
		jQuery("#header").animate({
			margin : '-310px 0 0 0'
		}, 1000, 'easeOutBounce');
	}
	function setSmall() {
		big = false;
		jQuery("#header").animate({
			margin : '0px 0 0 0'
		}, 1500, 'easeOutBounce');
	}

	function init() {
		jQuery("#wordlistdiv").hide();
		$("#detail").draggable();
		jQuery("#detail").hide();
		window.onresize = function 변수명() {
			if (document.getElementById("detail").scrollHeight > document.documentElement.clientHeight) {
				document.getElementById("detail").style.top = "50%";
				var top_margin = -document.documentElement.clientHeight / 2;
				jQuery("#detail").css({
					margin : top_margin + 'px 0 0 -300px'
				});
			}
		}
	}
	function gomain() {
		setSmall();
		jQuery("#wordlistdiv").hide();
		jQuery("#detail").hide();
		document.getElementById("content").innerHTML = "";
		document.getElementById("form1").word.value = "";

	}
</script>
</head>

<body onload='init();'>
	<div class="container">
		<div id="header" class="header">
			<img src="img/top.png" />
			<div
				style="position: relative; top: -75px; left: 52%; width: 882px; margin-left: -441px; z-index: 1">
				<div style="float: left">
					<img src="img/gogglelogo_white.png" onclick='gomain()' />
				</div>
				<div
					style="float: left; height: 39px; margin-left: 80px; margin-top: 5px;">
					<form id="form1" name="form1" method="get" action="search"
						onsubmit="return Slistener(this);">
						<table width="600" height="40" border="0">
							<tr>
								<td width="120px"
									style="background-image: url(img/sel.png); background-repeat: no-repeat; text-align: center;">
									<select name="filter" id="filter"
									style="width: 120px; border: none">
										<option value='1'>All</option>
										<option value='2'>Title</option>
										<option value='3'>Author</option>
										<option value='4'>Text</option>
								</select>
								</td>
								<td width="350"
									style="background-image: url(img/search.png); background-repeat: no-repeat; text-align: left;"><input
									id="word" class="word" name="word" type="text"
									onkeydown="wordmover()" onkeyup="Rlistener(this.value)"
									onfocus="Rlistener(this.value)" autocomplete="off"
									style="width: 300px; border: none; padding: 0px; margin: 5px; height: 25px;" />
									<input type="image" src="img/blank.png"
									style="vertical-align: middle" />
									<div id="wordlistdiv" class="wordlist">
										<ul id="wordlist">
										</ul>
									</div></td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>
		<div class="content" id="contents">
			<div id="order">
				order : <a href="javascript:setorder('accuracy')">accuracy</a>, <a
					href="javascript:setorder('mentioned')"><b>mentioned</b></a>
			</div>
			<div class="result" id="content"></div>
			<br/><br/>
		</div>
		<div class="footer">
			<div style="float: left;">
				&nbsp; <a href="javascript:Dlistener('search.do?mode=init');"> <img
					src="img/update.png" />
				</a> <a href="#"
					onclick="open('tree.html','treeview','height=700px, width=600px, location=no, directories=no')">
					<!--<a href="javascript:maketree();">--> <img src="img/tree.png" />
				</a>
			</div>
			<div style="float: right;">
				<a href="javascript:Dlistener('egg.html');"> 
				<img src="img/bottom.png" />
				</a>
			</div>
		</div>
	</div>
	<div id="detail" class="detail">본문 출력용 div...</div>
</body>
</html>